<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quill</title>
  <!-- 引入css文件 -->
  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>

<body>
  <div id="toolbar-container">
    <span class="ql-formats">
        <select class="ql-font"></select>
        <select class="ql-size"></select>
    </span>
    <span class="ql-formats">
        <button class="ql-bold"></button>
        <button class="ql-italic"></button>
        <button class="ql-underline"></button>
        <button class="ql-strike"></button>
    </span>
    <span class="ql-formats">
        <select class="ql-color"></select>
        <select class="ql-background"></select>
    </span>
    <span class="ql-formats">
        <button class="ql-script" value="sub"></button>
        <button class="ql-script" value="super"></button>
    </span>
    <span class="ql-formats">
        <button class="ql-header" value="1"></button>
        <button class="ql-header" value="2"></button>
        <button class="ql-blockquote"></button>
        <button class="ql-code-block"></button>
    </span>
    <span class="ql-formats">
        <button class="ql-list" value="ordered"></button>
        <button class="ql-list" value="bullet"></button>
        <button class="ql-indent" value="-1"></button>
        <button class="ql-indent" value="+1"></button>
    </span>
    <span class="ql-formats">
        <button class="ql-direction" value="rtl"></button>
        <select class="ql-align"></select>
    </span>
    <span class="ql-formats">
        <button class="ql-link"></button>
        <button class="ql-image"></button>
        <button class="ql-video"></button>
        <button class="ql-formula"></button>
    </span>
    <span class="ql-formats">
        <button class="ql-clean"></button>
    </span>
</div>
<div id="editor"></div>
<button onclick="sub_post()">获取编辑内容</button>

  <!-- 引入js文件 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

  <!-- 初始化编辑器，snow主题 -->
  <script>
    // var toolbarOptions = [
    //   ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
    //   ['blockquote', 'code-block'],

    //   [{ 'header': 1 }, { 'header': 2 }],               // 用户自定义按钮值
    //   [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    //   [{ 'script': 'sub'}, { 'script': 'super' }],      // 上标/下标
    //   [{ 'indent': '-1'}, { 'indent': '+1' }],          // 减少缩进/缩进
    //   [{ 'direction': 'rtl' }],                         // 文本下划线

    //   [{ 'size': ['small', false, 'large', 'huge'] }],  // 用户自定义下拉
    //   [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    //   [{ 'color': [] }, { 'background': [] }],          // 主题默认下拉，使用主题提供的值
    //   [{ 'font': [] }],
    //   [{ 'align': [] }],

    //   ['clean']                                         // 清除格式
    // ];

    // var quill = new Quill('#editor', {
    //   modules: {
    //     toolbar: toolbarOptions
    //   },
    //   theme: 'snow'
    // });
    var editor = new Quill('#editor', {
      modules: {
        toolbar: '#toolbar-container'
      },
      theme: 'snow'
    });

    // 提交表单
    function sub_post() {
      console.log('aaaa')
      var html = document.querySelector('#editor').children[0].innerHTML;
      html = '<div class="ql-container ql-snow"><div class="ql-editor">'+html+"</div></div>";
      $('[name=content]').val(html);
      console.log(html)

      $("#submitForm").submit();
    }
  </script>
</body>

</html>